<template>
    <div class="steps-wrapper">
        <template v-for="(step, index) in showData">
            <div
                class="step-wrapper"
                :class="current === index + 1 ? 'current' : ''"
                @click="handleClick(step, index)"
            >
                {{ step.title }}<span v-if="step.finish">（已完成）</span>
            </div>
        </template>
    </div>
</template>
<script>
export default {
    name: 'StepList',
    props: {
        current: {
            type: Number,
            default: 1
        },
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {},
    computed: {
        showData() {
            return this.data.filter((item) => item.show);
        }
    },
    data() {
        return {};
    },
    methods: {
        handleClick(step, index) {
            this.$emit('change-step', index + 1);
        }
    }
};
</script>
<style scoped>
.steps-wrapper {
    display: flex;
    --step-height: 40px;
    --half-step-height: 20px;
    --arrow-step-bgcolor: #dcdee2;
    --arrow-step-color: #000;
    --arrow-step-checked-bgcolor: #3a3ad1;
    --arrow-step-checked-color: #fff;
    --card-body-bgcolor: #fff;
    --modal-bgcolor: #fff;
}
.step-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--step-height);
    line-height: var(--step-height);
    padding: 0 40px;
    background: var(--arrow-step-bgcolor);
    margin-right: 4px;
    cursor: pointer;
    color: var(--arrow-step-color);
}
.step-wrapper.current {
    background: var(--arrow-step-checked-bgcolor);
    color: var(--arrow-step-checked-color);
}
.step-wrapper:not(:first-child):before,
.step-wrapper:not(:last-child):after {
    content: '';
    position: absolute;
    top: 0;
    height: 0;
    width: 0;
    border-left: 14px solid;
    border-right: 14px solid transparent;
    border-top: var(--half-step-height) solid transparent;
    border-bottom: var(--half-step-height) solid transparent;
}
.step-wrapper:not(:first-child):before {
    left: 0;
    border-left-color: var(--card-body-bgcolor);
    z-index: 1;
}
.ivu-modal .step-wrapper:not(:first-child):before {
    left: 0;
    border-left-color: var(--modal-bgcolor);
    z-index: 1;
}
.step-wrapper:not(:last-child):after {
    right: -28px;
    z-index: 2;
    border-left-color: var(--arrow-step-bgcolor);
}
.step-wrapper:not(:last-child).current:after {
    border-left-color: var(--arrow-step-checked-bgcolor);
}
</style>
